<template>
  <div>
    <DataGridTable
      v-loading="loading"
      :data="stockPaymentDetails"
      :show-summary="true"
      :show-page="false"
      :multi-select="false"
      summary-field=",paymentType,rate,money"
      size="mini"
      style="width: 100%">
      <el-table-column v-if="editable" label="操作" width="100">
        <template slot="header" class="clearfix">
          <el-button
            icon="el-icon-plus"
            size="mini"
            type="primary"
            @click="addPayment">添加</el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="付款方式" prop="paymentType">
        <template slot-scope="scope">
          <el-select v-if="editable" v-model="scope.row.paymentType" placeholder="付款方式">
            <el-option
              v-for="(item) in dicts.bus_payment_type"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"/>
          </el-select>
          <template v-for="item in dicts.bus_payment_type" v-else >
            <span v-if="scope.row.paymentType === item.dictCode" :key="item.id" >{{ item.dictName }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="比例" width="180" prop="rate">
        <template slot="header" slot-scope="scope">
          比例(%)<IconHelp display-content="比例相加不能超过100" />
        </template>
        <template slot-scope="scope">
          <el-input-number v-model.number="scope.row.rate" :disabled="!editable" :controls="false" :precision="2" :max="100" :min="0" size="mini" @change="rateChange(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="金额" width="180" prop="money">
        <template slot-scope="scope">
          <el-input-number v-model.number="scope.row.money" :disabled="true" :controls="false" :precision="2" :min="0" size="mini" style="width: 100%"/>
        </template>
      </el-table-column>
      <el-table-column label="付款周期(天)" width="180">
        <template slot-scope="scope">
          <el-input-number v-model.number="scope.row.paymentPeriodDay" :disabled="!editable" :controls="false" :precision="0" :min="0" size="mini" />
        </template>
      </el-table-column>
      <el-table-column label="备注" >
        <template slot-scope="scope">
          <el-input v-model="scope.row.rmk" :disabled="!editable" size="mini" style="width: 100%"/>
        </template>
      </el-table-column>
    </DataGridTable>
  </div>
</template>

<script>
export default {
  dictTypes: ['bus_payment_type'],
  props: {
    stockPaymentDetails: {
      type: Array,
      required: true
    },
    editable: {
      type: Boolean,
      default: false,
      required: false
    },
    totalMoney: {
      type: Number,
      default: 0,
      required: true
    }
  },
  data() {
    return {
      loading: false
    }
  },
  methods: {
    rateChange(detailRow) {
      this.calPaymetDetail(this.totalMoney, detailRow)
    },
    calPaymetDetail(totalMoney, paymetRow) {
      paymetRow.money = paymetRow.rate * totalMoney / 100
    },
    addPayment() {
      const tmpDetails = JSON.parse(JSON.stringify(this.stockPaymentDetails))
      const addRow = { rate: 100, paymentType: 'zhang', paymentPeriodDay: 30 }
      this.calPaymetDetail(this.totalMoney, addRow)
      tmpDetails.push(addRow)
      this.$emit('setDetails', tmpDetails)
    },
    handleCurrentChange(row, event, column) {
      console.log(row, event, column, event.currentTarget)
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      if (row.sendMoney > 0) {
        this.$notify({
          title: '已付款的不能删除',
          type: 'warning',
          duration: 2500
        })
        return
      }
      const tmpDetails = JSON.parse(JSON.stringify(this.stockPaymentDetails))
      tmpDetails.splice(index, 1)
      this.$emit('setDetails', tmpDetails)
    }
  }
}
</script>
